import React from 'react';
import { Form, Input, Button, TreeSelect, message } from 'antd';
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 6,
    span: 16,
  },
};

const AddTemplate = (props) => {
  const onFinish = (values) => {
    let searchMsg = {}
    console.log(values);
    searchMsg.key = Date.now()
    searchMsg.templateNumber = values.templateNumber
    searchMsg.templateName = values.templateName
    searchMsg.templatePost = values.responsible1 + "-" + values.responsible2 + "-" + values.responsible3 + "-" + values.responsible4
    message.success("添加成功！");
    props.ok(searchMsg)
  };
  const onFinishFailed = (errorInfo) => {
    message.error("请重新输入！");
  };
  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="模板编号"
        name="templateNumber"
        rules={[
          {
            required: true,
            message: '请输入模板编号!',
          },
          {
            max: 5,
            message: "模板编号的最大长度为5"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="模板名字"
        name="templateName"
        rules={[
          {
            required: true,
            message: '请输入模板名字!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={`responsible1`}
        label="第一负责人">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '销售代表',
              label: '销售代表',
            },
            {
              value: '销售经理',
              label: '销售经理',
            },
            {
              value: '总经理',
              label: '总经理',
            },
            {
              value: '财务',
              label: '财务',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible2`}
        label="第二负责人">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '销售代表',
              label: '销售代表',
            },
            {
              value: '销售经理',
              label: '销售经理',
            },
            {
              value: '总经理',
              label: '总经理',
            },
            {
              value: '财务',
              label: '财务',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible3`}
        label="第三负责人">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '销售代表',
              label: '销售代表',
            },
            {
              value: '销售经理',
              label: '销售经理',
            },
            {
              value: '总经理',
              label: '总经理',
            },
            {
              value: '财务',
              label: '财务',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible4`}
        label="第四负责人">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '销售代表',
              label: '销售代表',
            },
            {
              value: '销售经理',
              label: '销售经理',
            },
            {
              value: '总经理',
              label: '总经理',
            },
            {
              value: '财务',
              label: '财务',
            },
          ]}
        />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          提交
          </Button>
        <Button style={{ marginLeft: "2rem" }} onClick={() => { props.cancel() }}>
          取消
          </Button>
      </Form.Item>
    </Form>
  );
}

export default AddTemplate;
